<template>
  <div class="l1" ref="texiao1">
    <div class="login-box">
      <h2>登录系统</h2>
      <div class="kuai">
        <video ref="videoElement" autoplay></video>
        <span class="o1"></span>
        <span class="o2"></span>
        <span class="o3"></span>
        <span class="o4"></span>
      </div>

      <div class="deng">
        <!-- <a @click="goNext"> 登录 </a> -->
        <a @click="goBack"> 返回账号密码登录 </a>
      </div>
    </div>
  </div>
</template>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script>
import * as THREE from "three";
import Net from "vanta/src/vanta.net";
export default {
  name: "MyFace",
  data() {
    return {
      username: "",
      password: "",
      msg: "",
    };
  },
  methods: {
    // goNext() {
    //   this.$router.push({ path: "/school" });
    // },
    goBack() {
      this.$router.push({ path: "/login" });
    },
    startCamera() {
      navigator.mediaDevices
        .getUserMedia({ video: true })
        .then((stream) => {
          this.videoElement.srcObject = stream;
        })
        .catch((error) => {
          console.error("Error accessing camera:", error);
        });
    },
    takePhoto() {
      // 获得Canvas对象
      let canvas = document.createElement("canvas");
      let ctx = canvas.getContext("2d");
      canvas.width = this.videoElement.videoWidth;
      canvas.height = this.videoElement.videoHeight;
      ctx.drawImage(this.videoElement, 0, 0, canvas.width, canvas.height);
      // toDataURL --- 可传入'image/png'---默认, 'image/jpeg'
      let img = canvas.toDataURL();
      // console.log("img-----", img);

      this.$http({
        url: this.$http.adornUrl(`/face/face-login`),
        method: "post",
        data: this.$http.adornData(img, false, "json"),
      }).then((response) => {
        if (response.data.code != 0) {
          this.$message.error(response.data.message);
        } else {
          this.$message.success(response.data.message);
          this.$router.push({ path: "/school" });
          // 关闭摄像头
          let stream = this.videoElement.srcObject;
          let tracks = stream.getTracks();
          tracks.forEach((track) => track.stop());
        }
      });
    },
  },
  mounted() {
    this.videoElement = this.$refs.videoElement;
    this.startCamera();
    setTimeout(() => {
      this.takePhoto();
    }, 3000); // 2000毫秒后自动执行takePhoto方法

    this.vantaEffect = Net({
      el: this.$refs.texiao1,
      THREE: THREE,
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 200.0,
      minWidth: 200.0,
      scale: 1.0,
      scaleMobile: 1.0,
      color: "#0085ac",
      backgroundColor: "#0a2c44",
      spacing: 12.0,
    });
  },
  beforeDestroy() {
    if (this.vantaEffect) {
      this.vantaEffect.destroy();
    }
  },
};
</script>

<style scoped>
.l1 {
  width: 100vw;
  height: 100vh;
  background-image: url("../assets/kk1.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 0px -50px;
}

.login-box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  padding: 40px;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.6);
  border-radius: 10px;
}

.login-box h2 {
  display: block;
  margin: 0 0 20px;
  padding: 0;
  padding-bottom: 5px;
  color: #fff;
  text-align: center;
}

.kuai {
  position: relative;
  margin: 0 auto;
  width: 12rem;
  height: 9rem;
  background-color: aqua;
}
.kuai video {
  width: 12rem;
  height: 9rem;
}

.kuai span {
  width: 1.5rem;
  height: 1.5rem;
}
.kuai .o1 {
  position: absolute;
  border-top: 2px solid aqua;
  border-left: 2px solid aqua;
  left: -5px;
  top: -5px;
}
.kuai .o2 {
  position: absolute;
  border-top: 2px solid aqua;
  border-right: 2px solid aqua;
  right: -5px;
  top: -5px;
}
.kuai .o3 {
  position: absolute;
  border-bottom: 2px solid aqua;
  border-left: 2px solid aqua;
  bottom: -5px;
  left: -5px;
}
.kuai .o4 {
  position: absolute;
  border-bottom: 2px solid aqua;
  border-right: 2px solid aqua;
  bottom: -5px;
  right: -5px;
}
a {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  color: #258bd2;
  font-size: 16px;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  transition: 0.5s;
  margin-top: 40px;
  letter-spacing: 4px;
}

.login-box a:hover {
  background: #258bd2;
  color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 5px #258bd2, 0 0 25px #258bd2, 0 0 50px #258bd2,
    0 0 100px #258bd2;
}

.deng {
  display: flex;
  justify-content: center;
}
</style>
